<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3-晃动-效果</title>
    <style>
        *, *:before, *:after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; }

        body {
            background: #2ab8ac;
            overflow-x: hidden; }

        .arrow {
            position: absolute;
            bottom: 2.5em;
            left: 50%;
            margin-left: -10px;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid rgba(255, 255, 255, 0.3); }
        .arrow:before {
            content: '';
            position: absolute;
            top: -18px;
            left: -12px;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent; }
        .section.shamrock .arrow:before {
            border-top: 14px solid #2ab8ac; }
        .section.carrot .arrow:before {
            border-top: 14px solid #ffab52; }
        .section.amethyst .arrow:before {
            border-top: 14px solid #9c55a5; }
        .section.scooter .arrow:before {
            border-top: 14px solid #57cadd; }
        .section.dolly .arrow:before {
            border-top: 14px solid #fff68d; }
        .section.shamrock .arrow:before {
            border-top: 14px solid #2ab8ac; }
        .section.pear .arrow:before {
            border-top: 14px solid #cce033; }




        .shake-vertical-slow {
            display: inline-block;
            transform-origin: center center;
        }

        .shake-vertical-slow:hover{
            animation-play-state: running; }




        @keyframes verical-slow {
            2% {
                transform: translate(0, 1.5px) rotate(1.5deg); }
            4% {
                transform: translate(0, -1.5px) rotate(-0.5deg); }
            6% {
                transform: translate(0, 1.5px) rotate(-1.5deg); }
            8% {
                transform: translate(0, -1.5px) rotate(-1.5deg); }
            10% {
                transform: translate(0, 2.5px) rotate(1.5deg); }
            12% {
                transform: translate(0, -0.5px) rotate(1.5deg); }
            14% {
                transform: translate(0, -1.5px) rotate(1.5deg); }
            16% {
                transform: translate(0, -0.5px) rotate(-1.5deg); }
            18% {
                transform: translate(0, 0.5px) rotate(-1.5deg); }
            20% {
                transform: translate(0, -1.5px) rotate(2.5deg); }
            22% {
                transform: translate(0, 0.5px) rotate(-1.5deg); }
            24% {
                transform: translate(0, 1.5px) rotate(1.5deg); }
            26% {
                transform: translate(0, 0.5px) rotate(0.5deg); }
            28% {
                transform: translate(0, 0.5px) rotate(1.5deg); }
            30% {
                transform: translate(0, -0.5px) rotate(2.5deg); }
            32% {
                transform: translate(0, 1.5px) rotate(-0.5deg); }
            34% {
                transform: translate(0, 1.5px) rotate(-0.5deg); }
            36% {
                transform: translate(0, -1.5px) rotate(2.5deg); }
            38% {
                transform: translate(0, 1.5px) rotate(-1.5deg); }
            40% {
                transform: translate(0, -0.5px) rotate(2.5deg); }
            42% {
                transform: translate(0, 2.5px) rotate(-1.5deg); }
            44% {
                transform: translate(0, 1.5px) rotate(0.5deg); }
            46% {
                transform: translate(0, -1.5px) rotate(2.5deg); }
            48% {
                transform: translate(0, -0.5px) rotate(0.5deg); }
            50% {
                transform: translate(0, 0.5px) rotate(0.5deg); }
            52% {
                transform: translate(0, 2.5px) rotate(2.5deg); }
            54% {
                transform: translate(0, -1.5px) rotate(1.5deg); }
            56% {
                transform: translate(0, 2.5px) rotate(2.5deg); }
            58% {
                transform: translate(0, 0.5px) rotate(2.5deg); }
            60% {
                transform: translate(0, 2.5px) rotate(2.5deg); }
            62% {
                transform: translate(0, -0.5px) rotate(2.5deg); }
            64% {
                transform: translate(0, -0.5px) rotate(1.5deg); }
            66% {
                transform: translate(0, 1.5px) rotate(-0.5deg); }
            68% {
                transform: translate(0, -1.5px) rotate(-0.5deg); }
            70% {
                transform: translate(0, 1.5px) rotate(0.5deg); }
            72% {
                transform: translate(0, 2.5px) rotate(1.5deg); }
            74% {
                transform: translate(0, -0.5px) rotate(0.5deg); }
            76% {
                transform: translate(0, -0.5px) rotate(2.5deg); }
            78% {
                transform: translate(0, -0.5px) rotate(1.5deg); }
            80% {
                transform: translate(0, 1.5px) rotate(1.5deg); }
            82% {
                transform: translate(0, -0.5px) rotate(0.5deg); }
            84% {
                transform: translate(0, 1.5px) rotate(2.5deg); }
            86% {
                transform: translate(0, -1.5px) rotate(-1.5deg); }
            88% {
                transform: translate(0, -0.5px) rotate(2.5deg); }
            90% {
                transform: translate(0, 2.5px) rotate(-0.5deg); }
            92% {
                transform: translate(0, 0.5px) rotate(-0.5deg); }
            94% {
                transform: translate(0, 2.5px) rotate(0.5deg); }
            96% {
                transform: translate(0, -0.5px) rotate(1.5deg); }
            98% {
                transform: translate(0, -1.5px) rotate(-0.5deg); }
            0%, 100% {
                transform: translate(0, 0) rotate(0); } }

        .shake-vertical-slow.shake-constant {
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-name: verical-slow;
            animation-timing-function: ease-in-out; }




    </style>
</head>
<body>



<span class="arrow shake-vertical-slow shake-constant"></span>


</body>
</html>